<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas考试</title>
</head>
<style>
    .wrapper{
        width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<body>

    <div class="wrapper">
        <div class="item">
            <div>第一题</div>
            <canvas id="canvas-1" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第二题</div>
            <canvas id="canvas-2" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第三题</div>
            <canvas id="canvas-3" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第四题</div>
            <canvas id="canvas-4" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
            <input type="button" id="Fd" value="放大" />
        </div>
        <div class="item">
            <div>第五题</div>
            <canvas id="canvas-5" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
            <div>
                <input type="button" value="红" id="red">
                <input type="button" value="黄" id="yellow">
                <input type="button" value="蓝" id="blue">
                <input type="button" value="下载" id="download">
            </div>
        </div>
        <div class="item">
            <div>第六题</div>
            <canvas id="canvas-6" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
            <input type="number" id="nu-light"/>
            <input type="button" name="heibai" id="heibai" value="黑白" />
        </div>
    </div>
    
</body>
<script>
    window.onload = function(){
			let oCanvas1 = document.getElementById('canvas-1');
			let oPen1 = oCanvas1.getContext("2d");
			console.dir(oPen1);
			//实心圆
			oPen1.beginPath();
			oPen1.arc(50,50,30,0,Math.PI*2,false);
			oPen1.closePath();
			oPen1.strokeStyle ="black";
			//实心矩形
			oPen1.moveTo(80,20);
			oPen1.lineTo(200,20);
			oPen1.lineTo(200,120);
			oPen1.lineTo(80,120);
			oPen1.lineTo(80,20);
			oPen1.fill();
			//圆角矩形
			oPen1.beginPath();
			oPen1.lineWidth=10;
			oPen1.moveTo(10,150);
			oPen1.lineTo(150,150);
			oPen1.lineTo(150,200);
			oPen1.lineTo(10,200);
			oPen1.lineTo(10,150);
			oPen1.lineJoin="round";
			oPen1.stroke();	

            let oCanvas2 =document.getElementById('canvas-2');
		    let oPen2 = oCanvas2.getContext("2d");
			console.dir(oPen2);
			//空心圆
			oPen2.beginPath();
			oPen2.arc(50,50,30,0,Math.PI*2,false);
			oPen2.closePath();
			oPen2.strokeStyle ="black";
			//空心矩形
			oPen2.moveTo(80,20);
			oPen2.lineTo(200,20);
			oPen2.lineTo(200,120);
			oPen2.lineTo(80,120);
			oPen2.lineTo(80,20);
			//直角三角形
			oPen2.moveTo(250,100);
			oPen2.lineTo(250,200);
			oPen2.lineTo(40,200);
			oPen2.lineTo(250,100);
			oPen2.stroke();
			
			let oCanvas3 =document.getElementById('canvas-3');
		    let oPen3 = oCanvas3.getContext("2d");
			console.dir(oPen3);
			oPen3.fillStyle="darkblue";
			let x=120,
			    y=120,
			    width=50,
			    height=50;
			oPen3.fillRect(x,y,width,height);
			setInterval (function(){
			oPen3.translate(x+width/2,y+height/2);
			oPen3.rotate(Math.PI/180*30);
			oPen3.translate(-(x+width/2),-(y+height/2));
			oPen3.clearRect(0,0,300,300);
			oPen3.fillRect(x,y,width,height);
			 },2000)
			
			let oCanvas4 =document.getElementById('canvas-4');
		    let oPen4 = oCanvas4.getContext("2d");
			console.dir(oPen4);
			
			let zQ=document.getElementById('Fd')
			zQ.onclick=function(){
			oPen4.moveTo(60,20);
			oPen4.lineTo(120,20);
			oPen4.lineTo(120,80);
			oPen4.lineTo(60,80);
			oPen4.lineTo(60,20);
			
			let scaleX=1.5;
			let scaleY=1.5;
			oPen4.fillStyle="aqua";
			oPen4.translate((x+width/2)*(1-scaleX),(y+height/2)*(1-scaleY));
			oPen4.scale(scaleX,scaleY);
			oPen4.fillRect(x,y,width,height);
			}
			
			let oCanvas5 =document.getElementById('canvas-5');
		    let oPen5 = oCanvas5.getContext("2d");
			console.dir(oPen5);
			oPen5.lineWidth=3;
			
			
			oCanvas5.onclick = function() {
				var m, n;
				var f = 0;
				document.onmousedown = function(e) {
					m = +(e.pageX - oCanvas5.offsetLeft);
					n = +(e.pageY - oCanvas5.offsetTop);
					oPen5.moveTo(m, n);
					f = 1;
					console.dir(m);
					document.onmousemove = function(e) {
						m = (e.pageX - oCanvas5.offsetLeft);
						n = (e.pageY - oCanvas5.offsetTop);
						if(f == 1) {
							oPen5.lineTo(m, n)
							oPen5.stroke();
						}
					}
					document.onmouseup = function(e) {
						f = 0
					}
					console.dir(m);
				}
				
			}
			let hongS = document.getElementById('red');
			hongS.onclick = function() {
				oPen5.fillStyle="red";
				oPen5.strokeStyle="red";
			}
			let huangS = document.getElementById('yellow');
			huangS.onclick = function() {
				oPen5.fillStyle="yellow";
				oPen5.strokeStyle="yellow";
			}
			let lS = document.getElementById('blue');
			lS.onclick = function() {
				oPen5.fillStyle="blue";
				oPen5.strokeStyle="blue";
			}

			let oCanvas6 =document.getElementById('canvas-6');
		    let oPen6 = oCanvas6.getContext("2d");
			console.dir(oPen6);
			
			var image = new Image();
			image.src = 'img1.jpg';
		    image.onload = function() {
				oPen6.drawImage(image, 0, 0, 300, 300);
				var imageData = oPen6.getImageData(0, 0, 300, 300)
				var data = imageData.data
				console.dir(data);
                var f=0
				document.getElementById('heibai').onclick = function() {
					
					let light = parseInt(document.getElementById('nu-light').value);
					console.dir(average);
					for(var i = 0; i < data.length; i += 4) {
						var grayscale = data[i]*0.3+data[i+1]*0.6+data[i+2]*0.1;
						data[i + 0] += grayscale;
						data[i + 1] += grayscalea;
						data[i + 2] += grayscale;
					}
					oPen6.putImageData(imageData, 0, 0);
				}	
			}
	}
</script>
</html>